<template>
  <el-popover
    placement="top"
    width="240"
    trigger="click"
    @show="handlePopoverShow">
    <div class="pen-options">
      <!-- 笔触选择 -->
      <div class="pen-types">
        <div v-for="penType in penTypes"
             :key="penType.type"
             class="pen-type-item"
             :class="{ active: currentPenType === penType.type }"
             @click="selectPenType(penType)">
          <i :class="penType.icon"></i>
          <span>{{ penType.label }}</span>
        </div>
      </div>
      <!-- 颜色选择 -->
      <div class="color-picker">
        <div class="color-title">颜色</div>
        <el-color-picker
          v-model="penColor"
          :predefine="predefineColors"
          size="small"
          @change="handleColorChange">
        </el-color-picker>
      </div>
    </div>
    <!-- 触发按钮 -->
    <div slot="reference" 
         class="tool-item"
         :class="{ active: isActive }"
         @click="handleClick">
      <div class="tool-content">
        <i class="el-icon-edit"></i>
        <span>画笔</span>
      </div>
    </div>
  </el-popover>
</template>

<script>
export default {
  name: 'PenTool',
  data() {
    return {
      currentPenType: 'pencil',
      penColor: '#000000',
      penTypes: [
        { type: 'pencil', label: '铅笔', icon: 'el-icon-edit' },
        { type: 'brush', label: '钢笔', icon: 'el-icon-brush' },
        { type: 'chalk', label: '粉笔', icon: 'el-icon-edit-outline' }
      ],
      predefineColors: [
        '#000000',
        '#FFFFFF',
        '#FF0000',
        '#00FF00',
        '#0000FF',
        '#FFFF00',
        '#FF00FF',
        '#00FFFF'
      ]
    }
  },
  props: {
    isActive: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleClick() {
      this.$emit('select', {
        tool: 'pen',
        penType: this.currentPenType,
        penColor: this.penColor
      })
    },
    selectPenType(penType) {
      this.currentPenType = penType.type
      this.$emit('select', {
        tool: 'pen',
        penType: this.currentPenType,
        penColor: this.penColor
      })
    },
    handleColorChange(color) {
      this.penColor = color
      this.$emit('select', {
        tool: 'pen',
        penType: this.currentPenType,
        penColor: this.penColor
      })
    },
    handlePopoverShow() {
      this.handleClick()
    }
  }
}
</script>

<style scoped>
.pen-options {
  padding: 10px;
}

.pen-types {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 15px;
}

.pen-type-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s;
}

.pen-type-item:hover {
  background: #f5f7fa;
}

.pen-type-item.active {
  background: #ecf5ff;
  color: #409eff;
}

.pen-type-item i {
  font-size: 20px;
  margin-bottom: 4px;
}

.pen-type-item span {
  font-size: 12px;
}

.color-picker {
  border-top: 1px solid #eee;
  padding-top: 10px;
}

.color-title {
  margin-bottom: 8px;
  font-size: 14px;
  color: #606266;
}

.tool-item {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 5px 15px;
  border-radius: 8px;
}

.tool-item:hover {
  background: #f5f7fa;
}

.tool-item.active {
  background: #ecf5ff;
  color: #409eff;
}

.tool-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.tool-content i {
  font-size: 24px;
}

.tool-content span {
  font-size: 12px;
}
</style> 